<template>
    <a-layout class="layout">
        <a-layout-header class="header">
            <div class="logo"></div>
            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="horizontal" @click="menuClick">
                <a-menu-item key="0">检测设备</a-menu-item>
                <a-menu-item key="1">开始通话</a-menu-item>
            </a-menu>
            <span class="span_id">当前通话状态:{{ scoketStore.state }}</span>
            <a-popover title="用户信息">
                <template #content>
                    <p>用户名：{{ scoketStore.userName }}</p>
                    <p>ID：{{ scoketStore.userId }}</p>
                </template>
                <a-avatar class="avatar" :size="38">
                    <template #icon><UserOutlined /></template>
                </a-avatar>
            </a-popover>
            <a-button class="btn_logout" type="primary" @click="exit">退出</a-button>
        </a-layout-header>
        <a-layout-content style="padding: 24px">
            <div class="content">
                <RouterView />
            </div>
        </a-layout-content>
    </a-layout>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { MenuProps } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { useSocketStore } from "../stores/imsocket";
import { UserOutlined } from "@ant-design/icons-vue";
import vConsole from "vconsole";

const paths = ["/devices", "/chat", "/viewRooms"];
const router = useRouter();
const route = useRoute();
const selectedKeys = ref<string[]>(["0"]);
const scoketStore = useSocketStore();
const vc = ref();
onMounted(() => {
    const path = route.path;
    const key = paths.findIndex((item) => item === path);
    scoketStore.isPhone = !!navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    );
    vc.value = new vConsole();
    if (key !== -1) {
        selectedKeys.value = [key.toString()];
    }
    console.log(path);
});

const menuClick: MenuProps["onClick"] = (menuInfo: any) => {
    router.push(paths[menuInfo.key]);
};
const exit = () => {
    window.localStorage.removeItem("user");
    window.localStorage.removeItem("userid");
    scoketStore.clearUser();
    router.push("/login");
};
</script>

<style scoped lang="scss">
.layout {
    height: 100%;
    .header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .span_id {
            font-size: 14px;
            color: #fff;
            margin-left: auto;
            margin-right: 50px;
            line-height: 1;
            p {
                margin: 0;
                line-height: 1;
            }
        }
        .btn_logout {
            margin-left: 24px;
        }
    }
}
.content {
    height: 100%;
    overflow: auto;
    background-color: #fff;
    padding: 12px 24px;
}

@media screen and (max-width: 700px) {
    .span_id {
        display: none;
    }
    .avatar {
        display: none;
    }
}
</style>
